<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/common/css/bootstrap.css">
    <link rel="stylesheet" href="/css/basic.css">
    <script src="/common/js/jquery-1.10.1.js"></script>
    <script src="/common/js/bootstrap.js"></script>
    <!-- 引入验证插件的css文件及js文件 -->
    <link rel="stylesheet" href="/common/css/bootstrapValidator.css">
    <script src="/common/js/bootstrapValidator.js"></script>
    <!-- 如果想对某一个字段添加验证规则，需要<div class="form-group"></div>包裹，input标签必须有name值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构 -->
</head>

<body>
    <!-- 引入头部共同内容 -->
    <%- include('../components/header.ejs') %>
        <div class="container-fluid">
            <div class="row">
                <!-- 侧边栏开始 -->
                <%- include('../components/sidebar.ejs',{flag:3}) %>
                    <!-- 侧边栏结束 -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb">
                            <li>用户管理
                            </li>
                            <li class="active">修改用户
                            </li>
                        </ol>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                修改用户
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive input-form">
                                    <div class="input-form">
                                        <form action="/admin/doedituser/<%=userData._id%>" method="post" enctype="multipart/form-data">
                                            <div class="form-group">
                                                <label> 用户姓名: </label>
                                                <input type="text" name="username" class="form-control" value="<%= userData.username %>" />
                                            </div>
                                            <div class="form-group">
                                                <label> 商品图片: </label>
                                                <input type="file" name="pic" id="pic" /></li>
                                            </div>
                                            <div class="form-group">
                                                缩略图:
                                                <img src="<%= userData.pic %>" alt="" class="thumbnail" style="width: 50px;">
                                            </div>
                                            <div class="form-group">
                                                <label> 用户性别:  </label>
                                                <input type="text" name="sex" class="form-control" value="<%= userData.sex %>" />
                                            </div>
                                            <div class="form-group">
                                                <label> 用户年龄:  </label>
                                                <input type="text" name="age" class="form-control" value="<%= userData.age %>" />
                                            </div>
                                            <div class="form-group">
                                                <label> 居住地址: </label>
                                                <textarea name="address" id="" cols="60" rows="4" class="form-control"><%= userData.address %></textarea>
                                                </li>
                                            </div>
                                            <div class="form-group">
                                                <input type="submit" class="btn btn-default" value="修改用户">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
            </div>
        </div>
        <script>
            // 上传图片文件的读取
            $('#pic').change(function() {
                console.log('改变');
                let fileReader = new FileReader();
                console.log(this.files);
                // 读取图片内容
                fileReader.readAsDataURL(this.files[0]);
                fileReader.onload = function() {
                    // 接受读取图片的内容
                    console.log(fileReader.result);
                    // $('.thumbnail')[0].src = fileReader.result;
                    $('.thumbnail').attr('src', fileReader.result);
                }

            });
            // 表单校验
            $('form').bootstrapValidator({
                // 默认的提示消息
                message: 'This value is not valid',
                // 表单框里右侧的icon
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: '用户名验证失败',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: { //长度限制
                                min: 6,
                                max: 18,
                                message: '用户名长度必须在6到18位之间'
                            },
                            regexp: { //正则表达式
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '用户名只能包含大写、小写、数字和下划线'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            different: { //比较
                                field: 'username', //需要进行比较的input name值
                                message: '密码不能与用户名相同'
                            },
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {
                                message: '确认密码不能为空'
                            },
                            different: { //比较
                                field: 'username', //需要进行比较的input name值
                                message: '密码不能与用户名相同'
                            },
                            identical: { //比较是否相同
                                field: 'password', //需要进行比较的input name值
                                message: '两次密码不一致'
                            },
                        }
                    },
                    age: {
                        validators: {
                            greaterThan: {
                                value: 18,
                                message: '年龄必须大于等于18'
                            },
                            lessThan: {
                                value: 100,
                                message: '年龄必须小于等于100'
                            }

                        }
                    }
                }
            });
        </script>
</body>

</html>